<template>
    <div class="xxlBottonRoot">
        <div class="xxlCtx"><button
                :style="{ height: h + 'px', borderRadius: h / 2 + 'px', background: back, padding: '0px ' + p + 'px', border:b }"
                class="xxlB">
                <slot></slot>
            </button></div>
    </div>
</template>

<script>
export default {
    name: 'XxlBotton',

    data() {
        return {

        };
    },

    mounted() {

    },

    props: {
        h: {
            default: "40"
        },
        back: {
            default: ""
        },
        p: { default: "" },
        b: { default: "" }

    },
    methods: {

    },
};
</script>

<style lang="scss" scoped>
@import '../xxl-scss/xxl.scss';

.xxlCtx {
    font-weight: bold;
    border: none;

    .xxlB {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        border: none;
        outline: none;
        padding: 0px 30px;
        box-sizing: border-box;
        font-size: $xxl-font-size-button;
        color: $xxl-text-color-inverse;
        background: $xxl-color-primary;
    }

    .xxlB:active {
        background: $xxl-color-click;
    }
}</style>